<%-- 
    Document   : header
    Created on : 04/12/2010, 11:41:36
    Author     : koji
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<script type="text/javascript" src="script/prototype.js"></script>
<script type="text/javascript" src="script/effects.js"></script>

<style type="text/css">
    .header {
        width: 100%;
        height: 38px;
        background: url(images/header-background.png) repeat-x #6883D4 0px 0px;
        margin-bottom: 20px;
    }
    div.header > span.title {
        position: relative;
        top: -100px;
        font-weight: bold;
        color: white;
    }
    div.menu {
        position: absolute;
        left: 0px;
        top: 150px;
        width: 145px;
    }
    div.menu > table {
        width: 100%;
    }
    div.menu span.pag {
        background-color: #6883D4;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        box-shadow: 4px 4px 5px #888;
        -webkit-box-shadow: 4px 4px 5px #888;
        -moz-box-shadow: 4px 4px 5px #888;
        width: 90%;
        padding: 5px;
        margin-bottom: 5px;
        display: block;
    }
    div.menu span.pag a {
        color: white !important;
    }
    body.sismol {
        margin: 0;
        font-family: sans-serif;
    }
    div.body {
        margin-left: 150px;
        margin-right: 20px;
    }
    div.title {
        font-size: 22pt;
        font-weight: bold;
        text-align: center;
    }
</style>

<div class="header" style="width:100%;">
    <img src="images/logo.png" alt="Sismol" />
    <span class="title">Sistema de Monitoramento de &Ocirc;nibus de Linha</span>
</div>

<div class="menu">
    <table cellpadding="5" cellspacing="5">
        <thead>
            <tr>
                <th>
                    <div style="border-bottom: 1px solid black; width: 100%;"><img src="images/menu.png" alt="Menu" style="width: 16px;" />&nbsp;&nbsp;MENU</div>
                </th>
            </tr>
        </thead>
        <tbody style="font-size: smaller;">
            <tr>
                <td>
                    <span class="pag">
                        <a href="index.jsp"><img src="images/bullet.png" alt="*" />Home</a>
                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="pag">
                        <a href="view.jsp"><img src="images/bullet.png" alt="*" />Monitorar Linha</a>
                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="pag">
                        <a href="howitworks.jsp"><img src="images/bullet.png" alt="*" />Como Funciona</a>
                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    <span class="pag">
                        <a href="about.jsp"><img src="images/bullet.png" alt="*" />Sobre</a>
                    </span>
                </td>
            </tr>
        </tbody>
    </table>
</div>
